<!DOCTYPE html>
<html lang="en" xmlns:th="www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- 页面顶部碎片 -->
<div th:fragment="top">
    <!-- 顶部导航栏 -->
    <div class="top-nav">
        <div class="container">
            <div>
                <span class="location-top fl iconfont mr5">&#xe60b;</span>
                <span class="fl mr420">上海</span>
            </div>
            <ul>
                <li><a href="#">我的购物车</a></li>
                <li class="spacer">|</li>
                <li><a href="#">我的订单</a></li>
                <li class="spacer">|</li>
                <li>
                    <a href="/toLogin" th:if="${session.loginName} == null">你好, 请登录</a>
                    <a th:if="${session.loginName} != null">你好, <span style="color: red"
                                                                      th:text="${session.loginName}"></span> </a>
                    &nbsp;&nbsp;
                    <a class="free-login">免费注册</a>
                </li>
            </ul>
        </div>
    </div>
    <!--  =================== head =============================== -->
    <div class="head">
        <div class="container">
            <!-- ============= logo ============= -->
            <div class="logo fl">
                <h1>
                    <a class="hot-word">蜗牛学苑</a>
                </h1>
            </div>
            <!-- ============= 搜索框部份 ============= -->
            <div class="search fl ml100">
                <div class="up">
                    <div class="search-box fl mr18">
                        <input class="fl" type="text" value="请输入搜索关键字"/>
                        <span class="photo">&#xe663;</span>
                        <span class="search-icon fl">&#xe660;</span>
                    </div>

                    <div class="cart fl" onmouseover="checkCartNum()">
                        <span class="iconfont">&#xe622;</span>
                        <a href="/cart/searchByUserId">我的购物车</a>
                        <i class="num">0</i>
                    </div>
                    <script>
                        function checkCartNum() {

                            axios.get('/cart/getCartNum', {}).then(function (response) {
                                console.log("当前用户的购物车数结果:"+response.data.data);
                                // 把得到的购物车数据，写到相应的位置上。
                                $(".cart .num").html(response.data.data);

                            }).catch(function (error) {
                                console.log(error);
                            });
                        }
                    </script>
                </div>

                <div class="navitems">
                    <ol>
                        <li><a class="red-and-weight" href="#">秒杀</a></li>
                        <li><a class="red-and-weight" href="#">优惠券</a></li>
                        <li><a href="#">程序设计</a></li>
                        <li><a href="#">数据库</a></li>
                        <li><a href="#">网络与数据通信</a></li>
                        <li><a href="#">科普读物</a></li>
                        <li><a href="#">建筑学</a></li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 底部碎片 -->
<div th:fragment="footer">
    <!-- =============== 最后的网站底部 =============== -->
    <div class="container-fluid" id="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-2">
                    <dl>
                        <dt><b>热线电话</b></dt>
                        <dd id="tel"><i>020-000000</i></dd>
                        <dd class="openDate">周一至周五9:00-21:00</dd>
                        <dd class="openDate">周六至周日9:00-17:30</dd>
                        <dd><a href="#">在线客服</a></dd>
                    </dl>
                </div>
                <div class="col-md-2">
                    <dl>
                        <dt><b>服务保障</b></dt>
                        <dd><a href="#">正品保证</a></dd>
                        <dd><a href="#">7天无理由退换</a></dd>
                        <dd><a href="#">退货返运费</a></dd>
                        <dd><a href="#">7X15小时客户服务</a></dd>
                    </dl>
                </div>
                <div class="col-md-2">
                    <dl>
                        <dt><b>支付方式</b></dt>
                        <dd><a href="#">公司转账</a></dd>
                        <dd><a href="#">货到付款</a></dd>
                        <dd><a href="#">在线支付</a></dd>
                        <dd><a href="#">分期付款</a></dd>
                    </dl>
                </div>
                <div class="col-md-2">
                    <dl>
                        <dt><b>商家服务</b></dt>
                        <dd><a href="#">商家信息</a></dd>
                        <dd><a href="#">培训中心</a></dd>
                        <dd><a href="#">广告服务</a></dd>
                        <dd><a href="#">服务市场</a></dd>
                    </dl>
                </div>
                <div class="col-md-2">
                    <dl>
                        <dt><b>物流配送</b></dt>
                        <dd><a href="#">免运费</a></dd>
                        <dd><a href="#">海外配送</a></dd>
                        <dd><a href="#">EMS</a></dd>
                        <dd><a href="#">211限时达</a></dd>
                    </dl>
                </div>
                <div class="col-md-2">
                    <dl>
                        <dt><b>关注我们</b></dt>
                        <img src="/img/code.png">
                    </dl>
                </div>
            </div>

        </div>
    </div>
</div>



</body>
</html>
